<template>
  <div class="page">
    <a-card :loading="loading">
      <template #title>
        <div class="title">{{ resume?.name }}<span v-if="resume?.title" class="sub"> - {{ resume?.title }}</span></div>
      </template>
      <div class="header">
        <a-avatar v-if="resume?.avatar" :src="resume?.avatar" :size="64" />
        <div class="info">
          <div>{{ resume?.email }}</div>
          <div>{{ resume?.phone }}</div>
          <div>{{ resume?.location }}</div>
          <div class="links">
            <a v-if="resume?.github" :href="resume?.github" target="_blank">GitHub</a>
            <a v-if="resume?.linkedin" :href="resume?.linkedin" target="_blank">LinkedIn</a>
            <a v-if="resume?.website" :href="resume?.website" target="_blank">Website</a>
          </div>
        </div>
      </div>

      <a-divider />
      <div v-if="resume?.summary" class="section">
        <h3>个人简介</h3>
        <v-md-editor v-model="resume.summary" mode="preview" :style="{ maxHeight: '60vh' }" />
      </div>

      <div v-if="resume?.experiences?.length" class="section">
        <h3>工作经历</h3>
        <a-timeline>
          <a-timeline-item v-for="e in resume!.experiences" :key="e.id">
            <div class="exp">
              <div class="exp-title">{{ e.company }} - {{ e.position }}</div>
              <div class="exp-time">{{ e.startDate }} ~ {{ e.endDate || '至今' }}</div>
              <div v-if="e.description" class="text">
                <v-md-editor v-model="e.description" mode="preview" :style="{ maxHeight: '40vh' }" />
              </div>
              <div v-if="e.achievements" class="text">
                <div class="muted" style="margin-bottom:4px">主要成就</div>
                <v-md-editor v-model="e.achievements" mode="preview" :style="{ maxHeight: '40vh' }" />
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>

      <div v-if="resume?.skills?.length" class="section">
        <h3>技能</h3>
        <a-space wrap>
          <a-tag v-for="s in resume!.skills" :key="s.id" color="blue">{{ s.name }}<span v-if="s.level"> · Lv{{ s.level }}</span></a-tag>
        </a-space>
      </div>

      <div v-if="resume?.projects?.length" class="section">
        <h3>项目</h3>
        <a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3 }" :data-source="resume!.projects">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card :hoverable="true" @click="open(item.demoUrl || item.githubUrl)">
                <template v-if="item.imageUrl" #cover>
                  <a-image :src="item.imageUrl" :preview="false" />
                </template>
                <a-card-meta :title="item.name">
                  <template #description>
                    <div class="text" v-if="item.description">
                      <SafeMarkdownEditor v-model="item.description" mode="preview" :style="{ maxHeight: '40vh' }" />
                    </div>
                    <div class="text small" v-if="item.technologies">技术：{{ item.technologies }}</div>
                    <div class="text small" v-if="item.highlights">
                      <div class="muted">项目亮点</div>
                      <SafeMarkdownEditor v-model="item.highlights" mode="preview" :style="{ maxHeight: '30vh' }" />
                    </div>
                  </template>
                </a-card-meta>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-card>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { ResumeDetailVO } from '@/types/api'
import { fetchResume } from '@/api/resume'
import SafeMarkdownEditor from '@/components/SafeMarkdownEditor.vue'

const loading = ref(false)
const resume = ref<ResumeDetailVO | null>(null)

onMounted(async () => {
  loading.value = true
  try {
    const resp = await fetchResume()
    resume.value = resp.data
  } finally {
    loading.value = false
  }
})

function open(url?: string) {
  if (url) window.open(url, '_blank')
}
</script>

<style scoped>
.page { max-width: 960px; margin: 0 auto; }
.title { font-size: 22px; font-weight: 600; }
.title .sub { font-size: 14px; font-weight: 400; color: rgba(0,0,0,0.45); margin-left: 6px; }
.header { display: flex; gap: 12px; align-items: center; }
.info { display: grid; gap: 2px; color: rgba(0,0,0,0.65); }
.links a { margin-right: 8px; }
.section { margin: 12px 0; }
.text { white-space: pre-wrap; color: rgba(0,0,0,0.75); }
.text.small { font-size: 12px; color: rgba(0,0,0,0.55); }
.muted { font-size: 12px; color: rgba(0,0,0,0.55); margin: 4px 0; }
</style>


